﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Between Tree</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    
    

</head>
<body>
    <h1>Between Tree</h1>      

    <table style="width:450px;">
        <tr>
            <td>
                <b>Tree1</b>
                <ul id="tree1" class="mini-tree" url="../data/listTree.txt" style="width:150px;height:150px;" 
                    showTreeIcon="true" textField="text" idField="id" parentField="pid" resultAsTree="false"          
                    allowDrag="true" allowDrop="true" 
                    >
                </ul>
            </td>
            <td style="padding-top:50px;width:130px;">
            
                <input type="button" value="Before >>" onclick="moveBefore()"/><br />
                <input type="button" value="After >>" onclick="moveAfter()"/><br />
                <input type="button" value="Add >>" onclick="moveAdd()"/><br />
            </td>
            <td>
                <b>Tree2</b>
                <ul id="tree2" class="mini-tree" url="../data/listTree.txt" style="width:150px;height:150px;" 
                    showTreeIcon="true" textField="text" idField="id" parentField="pid" resultAsTree="false"          
                    allowDrag="true" allowDrop="true" 
                    >
                </ul>
            </td>
        </tr>
    </table>
    
    <script type="text/javascript">
        mini.parse();

        var tree1 = mini.get("tree1");
        var tree2 = mini.get("tree2");

        function moveBefore() {
            var node1 = tree1.getSelectedNode();
            var node2 = tree2.getSelectedNode();
            if (!node1) {
                alert("请选择左侧节点");
                return;
            }

            tree1.removeNode(node1);
            tree2.addNode(node1, "before", node2);
        }
        function moveAfter() {
            var node1 = tree1.getSelectedNode();
            var node2 = tree2.getSelectedNode();
            if (!node1) {
                alert("请选择左侧节点");
                return;
            }
            
            tree1.removeNode(node1);
            tree2.addNode(node1, "after", node2);
        }
        function moveAdd() {
            var node1 = tree1.getSelectedNode();
            var node2 = tree2.getSelectedNode();
            if (!node1) {
                alert("请选择左侧节点");
                return;
            }
            
            tree1.removeNode(node1);
            tree2.addNode(node1, "add", node2);
        }

    </script>

    <div class="description">
        <h3>Description</h3>
        <div>            
            两棵树相互拖拽移动节点
            <ol>
                <li>可以拖拽节点相互移动</li>
                <li>可以点击按钮移动</li>
            </ol>
        </div>
    </div>

</body>
</html>